/** @format */

import { Input, NavBar, TextArea } from 'antd-mobile'

import styles from './SettingForm.module.scss'
import { useState } from 'react'

type Props = {
  // 关闭
  onClose?: () => void
  // 提交
  onSave: (val: string) => void
  // 文本
  content: string
  // 是否展示输入框
  showInput?: boolean
}

const SettingForm = ({ onClose, content, onSave, showInput = true }: Props) => {
  const [value, setValue] = useState(content)
  return (
    <div className={styles.root}>
      <NavBar
        className='navbar'
        right={
          <span
            className='commit-btn'
            onClick={() => onSave(value)}>
            提交
          </span>
        }
        onBack={onClose}>
        编辑{showInput ? '昵称' : '简介'}
      </NavBar>

      <div className='edit-input-content'>
        <h3>{showInput ? '昵称' : '简介'}</h3>
        {showInput ? (
          <div className='input-wrap'>
            <Input
              placeholder='请输入'
              value={value}
              onChange={(val: string) => setValue(val)}
            />
          </div>
        ) : (
          <TextArea
            className='textarea'
            value={value}
            placeholder='请输入'
            showCount
            maxLength={100}
            rows={4}
            onChange={(val: string) => setValue(val)}
          />
        )}
      </div>
    </div>
  )
}

export default SettingForm
